import React from 'react';
import { Form, Input, Select, Button, DatePicker } from 'antd';
import {  CloseOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import dayjs from 'dayjs';

const { Option } = Select;
const { RangePicker } = DatePicker;

export default function TenantCreate() {
  const [form] = Form.useForm();
  const navigate = useNavigate();

  // 上传图片模拟
  const uploadProps = {
    beforeUpload: (file) => {
      return false;
    },
    showUploadList: false,
  };

  // 保存
  const handleSave = async () => {
    try {
      const values = await form.validateFields();
      // 格式化租期和创建时间
      const [rentStart, rentEnd] = values.rentPeriod || [];
      const newTenant = {
        key: Date.now().toString(),
        tenantName: values.tenantName,
        contactPerson: values.contactPerson,
        phone: values.phone,
        email: values.email,
        rentArea: values.rentArea,
        monthlyRent: values.monthlyRent,
        rentStartDate: rentStart ? dayjs(rentStart).format('YYYY-MM-DD') : '',
        rentEndDate: rentEnd ? dayjs(rentEnd).format('YYYY-MM-DD') : '',
        status: values.status,
        createTime: values.createTime ? dayjs(values.createTime).format('YYYY-MM-DD HH:mm:ss') : '',
      };
      navigate('/tenant/info', { state: { newTenant } });
    } catch (e) {
      // 校验失败
    }
  };

  return (
    <div style={{ background: '#f5f7fa', minHeight: '100vh', padding: 32 }}>
      <div style={{ maxWidth: 1500, margin: '0 auto', background: '#fff', borderRadius: 8, boxShadow: '0 2px 8px rgba(0,0,0,0.04)', padding: 32, position: 'relative' }}>
        <div style={{ display: 'flex', alignItems: 'center', marginBottom: 24, borderBottom: '2px solid #eee', paddingBottom: 12 }}>
          <div style={{ width: 10, height: 24, background: '#4880ff', borderRadius: 2, marginRight: 12 }} />
          <span style={{ fontWeight: 700, fontSize: 22 }}>租户信息新增</span>
          <CloseOutlined style={{ position: 'absolute', right: 24, top: 32, fontSize: 28, cursor: 'pointer' }} onClick={() => navigate(-1)} />
        </div>
        <Form
          form={form}
          layout="vertical"
          style={{ display: 'flex', flexDirection: 'column', gap: 24, marginBottom: 40 }}
        >
          <div style={{ border: '1px solid #ccc', borderRadius: 12, marginBottom: 0, padding: 24, display: 'flex', flexWrap: 'wrap', gap: 24 }}>
              <div style={{ flex: '1 1 400px', minWidth: 350 }}>
              <Form.Item label="租户名称" name="tenantName" rules={[{ required: true, message: '请输入租户名称' }]} required>
                <Input placeholder="请输入租户名称" />
              </Form.Item>
              <Form.Item label="联系人" name="contactPerson" rules={[{ required: true, message: '请输入联系人' }]} required>
                <Input placeholder="请输入联系人" />
              </Form.Item>
              <Form.Item label="联系电话" name="phone" rules={[{ required: true, message: '请输入联系电话' }]} required>
                <Input placeholder="请输入联系电话" />
              </Form.Item>
              <Form.Item label="邮箱" name="email" rules={[{ required: true, message: '请输入邮箱' }]} required>
                <Input placeholder="请输入邮箱" />
              </Form.Item>
              <Form.Item label="租赁面积" name="rentArea" rules={[{ required: true, message: '请输入租赁面积' }]} required>
                <Input placeholder="请输入租赁面积" />
              </Form.Item>
              <Form.Item label="月租金" name="monthlyRent" rules={[{ required: true, message: '请输入月租金' }]} required>
                <Input placeholder="请输入月租金" />
              </Form.Item>
              <Form.Item label="租期" name="rentPeriod" rules={[{ required: true, message: '请选择租期' }]} required>
                <RangePicker style={{ width: '100%' }} />
              </Form.Item>
              <Form.Item label="状态" name="status" rules={[{ required: true, message: '请选择状态' }]} required>
                <Select placeholder="请选择"><Option value="正常">正常</Option><Option value="即将到期">即将到期</Option><Option value="欠费">欠费</Option></Select>
              </Form.Item>
              <Form.Item label="创建时间" name="createTime" rules={[{ required: true, message: '请选择创建时间' }]} required>
                <DatePicker showTime style={{ width: '100%' }} />
                </Form.Item>
            </div>
          </div>
        </Form>
        <div style={{ textAlign: 'center', marginTop: 40 }}>
          <Button type="primary" style={{ width: 120, marginRight: 32 }} onClick={handleSave}>保存</Button>
          <Button style={{ width: 120 }} onClick={()=>navigate(-1)}>取消</Button>
        </div>
      </div>
    </div>
  );
} 